<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>路况信息</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<style type="text/css">
			body{
				overflow-x: hidden;
				word-break: break-all;
			}
			#free_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				padding-bottom: 50px;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-top: 8px;
				padding-left: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			.app_head_right {
				float: right;
				height: 100%;
			}
			
			.app_head_right img {
				height: 38px;
				margin-top: 4px;
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			#l-map {
				width: 100%;
			}
			/*----导航栏样式----*/
			
			.weui_bar_item_on {
				background-color: #FFFFFF !important;
				color: #0070B4 !important;
			}
			
			.weui_navbar_item {
				color: #FFFFFF;
				background-color: #CCCCCC;
			}
			
			.weui_navbar_item b {
				display: block;
				height: 2em;
				line-height: 2em;
				border-right: 1px solid #FFFFFF;
			}
			/* 搜索框区域样式 */
			
			.weui_tab {
				padding-top: 15px;
			}
			
			.sec_line {
				width: 100%;
				background-color: #F5F5F5;
				padding: 7px 0px;
				border-bottom: 1px solid #DEDEDE;
			}
			
			#InputLine {
				margin-left: 2%;
				margin-right: 2%;
				margin-top: 3px;
				width: 96%;
				border: 1px solid #DEDEDE;
				border-radius: 7px;
				height: 44px;
				background-color: #FFFFFF;
				opacity: 0.92;
			}
			
			#freeway_suggestId {
				padding-left: 1em;
				width: 40%;
				height: 100%;
				border: none;
				float: left;
				outline: medium;
				color: #969696;
				font-size: 1.05em;
				font-weight: bold;
			}
			
			#freeEnd_suggestId {
				border-radius: 0;
				float: left;
				outline: none;
				border: medium;
				width: 48%;
				height: 100%;
				line-height: 43px;
				color: #B0B0B0;
				font-size: 1.05em;
				font-weight: bold;
				border-left: 1px solid #DEDEDE;
				border-right: 1px solid #DEDEDE;
				text-align: left;
				padding-left: 1.1em;
			}
			
			#searchBtn {
				display: block;
				float: right;
				width: 8%;
				padding-right: 10px;
				color: #666666;
				font-size: 2em;
				text-align: right;
				position: relative;
				left: -5px;
			}
			/*底部弹出框 头部样式*/
			
			.toolbar {
				height: 50px;
				background-color: #0070B4;
			}
			
			.toolbar-inner {}
			
			.title {
				color: #FFFFFF !important;
				letter-spacing: 0;
				text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555;
			}
			
			.close-picker {
				color: #FFFFFF !important;
				font-weight: bold;
				margin-top: 3px;
				margin-right: 5px;
				font-size: 1.1em;
			}
			/*---遮罩层---*/
			
			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
			}
			
			.mask {
				position: fixed;
				height: 100%;
				width: 100%;
				z-index: 99;
			}
			
			#freewayAll_Ul {
				padding: 0 10px;
				width: 100%;
			}
			
			#freewayAll_Ul li {
				border-bottom: 1px dashed #DEDEDE;
				color: #666666;
				padding: 10px;
				padding-left: 5.1em;
			}
			
			#freewayAll_Ul li span {
				color: #0070B4;
				display: block;
				float: left;
				width: 5.1em;
				position: absolute;
				margin-left: -5.1em;
			}
			
			.freewayTitle {
				color: red;
				font-size: 1.15em;
			}
			/* 返回顶部按钮 */
			
			.returnTopBtn {
				position: fixed;
				right: 15px;
				bottom: 80px;
				width: 45px;
				height: 43px;
				border-radius: 8px;
				z-index: 9999;
				background-color: #CCCCCC;
				padding: 6px;
			}
			/*---遮罩层---*/
			
			.opacity {
				opacity: 0.6;
				filter: alpha(opacity=30);
				background-color: #000;
			}
			
			.mask {
				position: fixed;
				top: 0;
				height: 100%;
				width: 100%;
				z-index: 100;
			}
			
			html,
			body {
				height: 100%;
			}
			/*图层loading*/
			
			#tcLoading {
				position: absolute;
				top: 40%;
				left: 32%;
				width: 35%;
				height: 15%;
				font-size: 0.9em;
				background-image: url(img/index/yjzPic.gif);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				text-align: right;
				z-index: 100000;
				color: #FFFFFF;
			}
			
			.BMap_pop>img {
				display: none;
			}
			
			#noResult_freeway {
				width: 100%;
				text-align: center;
				margin-top: 180px;
				font-size: 1.8em;
				color: #666666;
				font-family: "宋体";
			}
			
			footer li {
				width: 33.3%;
				position: relative;
				top: -3px;
			}
			
			footer li p {
				position: relative;
				top: -5px;
			}
			
			footer li:first-child img {
				width: 18%;
			}
			
			footer li:last-child img {
				width: 20%;
			}
			
			footer li p {
				position: relative;
				top: -5px;
			}
		</style>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
		<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
	</head>

	<body ontouchstart>
		<div class="mask opacity" id="opacityDiv_freeway" style="display: none;">
			<div id="tcLoading">
				努力加载中...
			</div>
		</div>
		<div id="free_main">
			<div class="index_head" id="firTitle">
				<div class="app_head_left">
					<a onclick="freeway_returnBtn()" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">高速信息</p>
				</div>
				<div class="app_head_right">
					<a href="freeway_tolls.html">
						<img src="img/freeway/moneyIcon.png" />
					</a>
				</div>
			</div>
			<div id="allmap"></div>
			<div class="weui_tab">
				<div class="weui_navbar" id="secTitle">
					<a href="#searchList" class="weui_navbar_item weui_bar_item_on" id="chooseList">
						<b>列表搜索</b>
					</a>
					<a href="#searchMap" class="weui_navbar_item" id="chooseMap">
						<b>地图查询</b>
					</a>
				</div>
				<div class="weui_tab_bd">
					<div id="searchList" class="weui_tab_bd_item weui_tab_bd_item_active">
						<div class="sec_line">
							<div id="InputLine">
								<input type="text" id="freeway_suggestId" maxlength="10" onpaste="return false;" placeholder="请输入高速名称" />
								<input type="text" id="freeEnd_suggestId" placeholder="选择截止时间" />
								<a id="searchBtn" href="javascript:;" class="iconfont">&#xe709;</a>
							</div>
						</div>
						<div id="noResult_freeway" style="display: none;">无相关信息</div>
						<ul id="freewayAll_Ul">

						</ul>
					</div>

					<div id="searchMap" class="weui_tab_bd_item">
						<div id="l-map"></div>
					</div>

				</div>
			</div>
			<footer>
				<li>
					<a href="javascript:;" id="index01">
						<div>
							<img src="img/freeway_foot/JHchoose.png" />
						</div>
						<p style="color: #1296db;">计划阻断</p>
					</a>
				</li>
				<li>
					<a href="freeway2.html">
						<div>
							<img src="img/freeway_foot/timenotChoose.png" />
						</div>
						<p style="color: #8a8a8a;">限制信息</p>
					</a>
				</li>
				<li>
					<a href="moreHtml/glgg.html">
						<div>
							<img src="img/freeway_foot/gl_icon.png" />
						</div>
						<p style="color: #8a8a8a;">公路公告</p>
					</a>
				</li>
			</footer>
		</div>

		<img src="img/index/returnTop2.png" style="display: none;" class="returnTopBtn" />
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var dateNowStr = "";
			getNowDate();
			$(function() {
				var h = document.documentElement.clientHeight - 65;
				$("#l-map").height(h);
				getAllFreeway();

			});

			//左上角返回按钮 点击事件
			function freeway_returnBtn() {
				if(!$("#chooseMap").hasClass("weui_bar_item_on")) {
					//当页面位于高速信息列表时
					window.location.href = "javascript:history.go(-1)";
				} else {
					//当页面位于地图时
					$("#chooseList").click();
				}
			}

			//获取当前时间
			function getNowDate() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m >= 10 ? m : "0" + m;
				var d = date.getDate();
				d = d >= 10 ? d : "0" + d;
				var h = date.getHours();
				h = h >= 10 ? h : "0" + h;
				var min = date.getMinutes();
				min = min >= 10 ? min : "0" + min;
				var s = date.getSeconds();
				s = s >= 10 ? s : "0" + s;
				dateNowStr = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s;
				//				nyrStr = dateNowStr.split(" ")[0];
				//				console.log(dateNowStr);
			}
			//获取所有高速公路路况信息方法
			function getAllFreeway() {
				$("#opacityDiv_freeway").show();
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "plan_traffic_info"
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//			console.log(data);
						var d = data.DATA;
						var m = data.MDATA;
						if(isEncrypt(d, m)) {
							//						console.log(data);
							d = eval(d);
							if(d.length == 0) {
								$("#noResult_freeway").show();
							} else {

								for(var i = 0; i < d.length; i++) {
									var backtime = d[i].comebackTime;
									if(backtime == "") {
										backtime = d[i].intendingComebackTime;
									}
									var gslk;
									if(d[i].caseBewrite.substring(0, 1) == "请") {
										//当caseBewrite字段内容不全时，在它的前面加locality字段内容补全
										gslk = d[i].locality + "，" + d[i].caseBewrite;
									} else {
										gslk = d[i].caseBewrite;
									}

									var beginInfo = d[i].beginCoordinate;
									beginInfo = beginInfo.split(",").reverse().join(",");
									var endInfo = d[i].endCoordinate;
									endInfo = endInfo.split(",").reverse().join(",");
									var li = $('<li data-endnum="' + endInfo + '" data-biginnum="' + beginInfo + '"  onclick="jumpToFreewWayMsgMap(this)"><span>高速名称： </span><b class="freewayTitle">' + d[i].roadName + '</b><br/><span>高速路况：  </span><a class="gslkMsg">' +
										gslk + '</a><br/><span>开始时间： </span><a class="start_time">' + d[i].begintime.substr(0, 16) + '</a><br/><span>预计结束： </span><a class="end_time">' + backtime.substr(0, 16) + '</a></li>');
									$("#freewayAll_Ul").append(li);
								}
							}
							$("#opacityDiv_freeway").hide();
						} else {
							errMD();
						}
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
						$("#opacityDiv_freeway").hide();
					}
				});
			}
			//初始化时间选择插件
			$("#freeEnd_suggestId").datetimePicker();
			$("#freeEnd_suggestId").change(function() {
				var nowTimeStr = dateNowStr.replace(/\-/g, "").replace(/\:/g, "").replace(" ", "").substring(0, 10);
				var myTimeStr = this.value.replace(/\-/g, "").replace(/\:/g, "").replace(" ", "").substring(0, 10);
				if(myTimeStr < nowTimeStr) {
					//当所选时间小于当前时间 禁止
				}
			});
			window.onscroll = function() {
				var scroll_top = $(document).scrollTop();
				if(scroll_top != 0) {
					$(".returnTopBtn").show();
				} else if(scroll_top == 0) {
					$(".returnTopBtn").hide();
				}
			};
			//每当点击地图按钮的时候，页面都返回顶部
			$("#chooseMap").click(function() {
				$(window).scrollTop(0);
			});
			$(".returnTopBtn").click(function() {
				$("body").animate({
					scrollTop: 0
				}, 300) //0.3秒回到顶部动画效果
			});
			var map = new BMap.Map("l-map");
			var point = new BMap.Point(125.10973333, 44.09094444); //地图加载时位于长春市中心点
			map.centerAndZoom(point, 11);
			//			map.enableScrollWheelZoom(true);
			//			var ctrl = new BMapLib.TrafficControl({
			//				showPanel: true //是否显示路况提示面板
			//			});
			//			map.addControl(ctrl);
			//			ctrl.setAnchor(BMAP_ANCHOR_TOP_RIGHT);

			//在高速名称Input框输入内容时
			var timeout;
			$("#freeway_suggestId").keyup(function() {
				var linkName = $(this).val();
				var pattern = /^[\u4e00-\u9fa5]*$/;
				if(!pattern.test(linkName)) {
					$.alert("请输入中文", "提示", function() {
						$("#freeway_suggestId").val("");
					});
				} else {

					$("#noResult_freeway").hide();
					if(this.value == "") {
						$("#opacityDiv_freeway").show();
						$("#freewayAll_Ul").html(""); //清空li
						clearTimeout(timeout);
						timeout = setTimeout("getAllFreeway()", 800);
						//					getAllFreeway();
					} else {
						clearTimeout(timeout);
						timeout = setTimeout("freewayInputTS()", 800);
					}
				}
			});

			//方法：输入框输入信息模糊查询
			function freewayInputTS() {
				var BLOCKENDDATE = "";
				$("#opacityDiv_freeway").show();
				$("#noResult_freeway").hide();
				$("#freewayAll_Ul").html(""); //清空所有li
				if($("#freeEnd_suggestId").val() == "") {
					dateNowStr = "";
				} else {
					getNowDate();
					BLOCKENDDATE = $("#freeEnd_suggestId").val() + ":00";
				}

				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "plan_traffic_info_by_name_or_date", //计划阻断信息模糊匹配名称和时间区间
						"ROADNAME": $("#freeway_suggestId").val(), //道路名称字符串
						"BLOCKSTARTDATE": dateNowStr, //"阻断开始时间"
						"BLOCKENDDATE": BLOCKENDDATE //"阻断恢复时间"
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						console.log(data);
						var d = data.DATA;
						var m = data.MDATA;
						if(isEncrypt(d, m)) {
							d = eval(d);
							console.log(d);
							if(d.length == 0) {
								$("#noResult_freeway").show();
							} else {
								$("#noResult_freeway").hide();
								for(var i = 0; i < d.length; i++) {
									var backtime = d[i].comebackTime;
									if(backtime == "") {
										backtime = d[i].intendingComebackTime;
									}
									var beginInfo = d[i].beginCoordinate;
									beginInfo = beginInfo.split(",").reverse().join(",");
									var endInfo = d[i].endCoordinate;
									endInfo = endInfo.split(",").reverse().join(",");

									var gslk;
									if(d[i].caseBewrite.substring(0, 1) == "请") {
										//当caseBewrite字段内容不全时，在它的前面加locality字段内容补全
										gslk = d[i].locality + "，" + d[i].caseBewrite;
									} else {
										gslk = d[i].caseBewrite;
									}

									var li = $('<li data-endnum="' + endInfo + '" data-biginnum="' + beginInfo + '"  onclick="jumpToFreewWayMsgMap(this)"><span>高速名称： </span><b class="freewayTitle">' + d[i].roadName + '</b><br/><span>高速路况：  </span><a class="gslkMsg">' +
										gslk + '</a><br/><span>开始时间： </span><a class="start_time">' + d[i].begintime.substr(0, 16) + '</a><br/><span>预计结束： </span><a class="end_time">' + backtime.substr(0, 16) + '</a></li>');
									$("#freewayAll_Ul").append(li);
								}
							}
							$("#opacityDiv_freeway").hide();
							//						$("#freewayAll_Ul").html("");
							//						if(data.length == 0) {
							//							$("#noResult").show();
							//							$("#opacityDiv_freeway").hide();
							//						} else {
							//							$("#noResult").hide();
							//							for(var i = 0; i < data.length; i++) {
							//								//								console.log(data);
							//								var li = $('<li data-position="' + data[i].position + '" data-business="' + data[i].business + '" data-phone="' + data[i].phonenumber + '" data-weizhiX="' + data[i].coordinateX + '" data-weizhiY="' + data[i].coordinateY + '" onclick="jumpToTollStationMsg(this)">' + data[i].serviceName + '</li>');
							//								$("#tollStationAll_Ul").append(li);
							//								$("#opacityDiv_freeway").hide();
							//							}
						} else {
							errMD();
						}
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
						$("#opacityDiv_freeway").hide();
					}
				});
			};
			$("#searchBtn").click(function() {
				freewayInputTS();
			});
			//点击进入地图详情显示
			function jumpToFreewWayMsgMap(tt) {
				map.clearOverlays();
				var a = $(tt).children("b").html(); //高速名称
				var b = $(tt).children(".gslkMsg").html(); //高速内容
				var ctime = $(tt).children(".start_time").html() + " ～ " + $(tt).children(".end_time").html();
				var beginInfo = $(tt).attr("data-biginnum");
				var endInfo = $(tt).attr("data-endnum");
				$("#chooseMap").click();
				$.ajax({
					type: 'post',
					url: 'http://api.map.baidu.com/direction/v1?mode=driving&origin=' + beginInfo + '&destination=' + endInfo + '&output=json&origin_region=吉林省&destination_region=吉林省&ak=LBmf187Ps3VW7694BIu6bLrxVCffBAs2',
					async: false,
					cache: false,
					dataType: 'jsonp',
					//服务端用于接收callback调用的function名的参数
					success: function(data) {
						var newPathArray = [];
						console.log(data);
						if(data.status == 0) {
							var pathInfo = data.result.routes[0].steps[0].path;
							pathInfo = pathInfo.split(";");
							for(var i = 0; i < pathInfo.length; i++) {
								var c = pathInfo[i];
								c = c.split(",");
								c[0] = Number(c[0]);
								c[1] = Number(c[1]);
								newPathArray.push(new BMap.Point(c[0], c[1]))
							}
							var point1 = newPathArray[Math.floor((newPathArray.length - 1) / 2)];
							var opts = {
								width: 300, // 信息窗口宽度
								title: "高速阻断信息", // 信息窗口标题
							}
							var content = "<p>名称:  " + a + "</p>" +
								"<p>事件:  </br>" + b + "</p>" +
								"<p>起止时间:  </br>" + ctime + "</p>"
							var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
							map.openInfoWindow(infoWindow, point1); //开启信息窗口

							//								//创建折线	
							var polyline = new BMap.Polyline(newPathArray, {
								strokeColor: "red",
								strokeWeight: 10,
								strokeOpacity: 0.8
							});
							polyline.addEventListener("longpress", function() {
								map.openInfoWindow(infoWindow, point1); //开启信息窗口
							});
							//							infoWindow.addEventListener("clickclose", function(){
							//								//点击小窗口关闭按钮时
							//								alert("dasdas");
							//							});
							map.addOverlay(polyline);
							//让线路试应屏幕
							map.setViewport(newPathArray);
							map.setZoom(15);
							//							$(".BMap_bottom").next().next().next().next().hide();

						}
					}
				})
			};
		</script>
	</body>

</html>